<template>
	<view>
		<cu-custom :bgColor="'bg-' + theme.backgroundColor" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">设置</block>
		</cu-custom>
		<view class="setting">
			<view class="form-list">
				<view class="info">
					<view class="form-item">
						<view>
							<view class="f32 text-blod">直播间信息</view>
							<view class="mt20">直播间:{{ liveInfo.liveName }}</view>
							<view class="mt20">开播时间:{{ liveInfo.startTime }}</view>
						</view>
					</view>
				</view>
				<view class="tips f28 mt20 mb20 text-gray">提示:同时设置将同时获得积分和红包!</view>
				<view class="form-item">
					<checkbox-group class="flex" @change="changeCheckBox">
						<text class="f36 mr20">选择奖励方式</text>
						<label v-for="(item, index) in checkBox" :key="index" class="flex ml20 mr20">
							<checkbox
								:value="item.value"
								:disabled="liveInfo.switchAnswer == '0'"
								:checked="item.checked"
								color="#FFCC33" />
							<text class="f36 ml10">{{ item.label }}</text>
						</label>
					</checkbox-group>
				</view>
				<view class="tips f28 mt20 mb20 text-gray" v-if="liveInfo.switchAnswer == '0'"
					>提示:直播间答题未开启!</view
				>
				<view v-if="checkBox[0].checked">
					<view class="form-item">
						<text class="f36">红包金额/人</text>
						<input class="f36" type="digit" v-model="form.hbAmount" placeholder="请输入奖励金额" />
					</view>
					<view class="tips f28 mt20 mb20 text-gray">提示,红包金额是每个人领取的红包金额!</view>
					<view class="form-item">
						<text class="f36">总数量</text>
						<input class="f36" type="number" v-model="form.hbQty" placeholder="请输入奖励金额" />
					</view>
				</view>
				<view v-if="checkBox[1].checked">
					<view class="form-item">
						<text class="f36">积分数量/人</text>
						<input class="f36" type="number" v-model="form.jfAmount" placeholder="请输入奖励金额" />
					</view>
					<view class="tips f28 mt20 mb20 text-gray">提示,积分数量是发放给每人的积分数量!</view>
					<view class="form-item">
						<text class="f36">总人数</text>
						<input class="f36" type="number" v-model="form.jfQty" placeholder="请输入奖励金额" />
					</view>
				</view>
				<view class="form-item">
					<text class="f36">设置抽奖状态</text>
					<switch
						checked
						@change="switch1Change"
						:disabled="liveInfo.tySet == '1' || liveInfo.lottery == '0'"
						:checked="form.isChou" />
				</view>
				<view
					class="tips f28 mt20 mb20 text-gray"
					v-if="liveInfo.tySet == '1' || liveInfo.lottery == '0'"
					>提示:直播间抽奖未开启或者由管理员统一设置!</view
				>
				<view>
					<view class="jiangpinList" v-if="form.isChou">
						<text class="f36 mb20">奖品设置</text>
						<view class="tips f28 mt20 mb20 text-gray"
							>提示:如果内定人未参与抽奖,奖品将随机抽给其他人!</view
						>
						<view class="tips f28 mt20 mb20 text-gray"
							>提示:未设置中奖人或中奖人数量小于奖品数量,奖品将随机抽给其他人!</view
						>
						<view class="jiangpin mb20" v-for="(item, index) in jiangpinList" :key="index">
							<view class="title">
								<text class="f30">奖品{{ index + 1 }}</text>
								<view class="form-btn cuIcon-add text-blue" @tap.stop="addJiangpin(item, index)">
									添加奖品
								</view>
							</view>
							<view class="form-item">
								<text class="f36">奖品名称</text>
								<input
									class="f36"
									type="text"
									:maxlength="12"
									v-model="item.name"
									placeholder="请输入奖品名称" />
							</view>
							<view class="form-item">
								<text class="f36">奖品数量</text>
								<input class="f36" type="number" v-model="item.num" placeholder="请输入奖品数量" />
							</view>

							<view class="zhongjianren" v-if="item.people">
								<view class="zhongjianren-item line-b" v-for="(val, i) in item.people" :key="i">
									<view class="title">
										<text class="f30">中奖人{{ i + 1 }}</text>
										<view
											class="form-btn cuIcon-add text-blue"
											@tap.stop="addzhongjiangren(item, val, i)">
											添加中奖人
										</view>
									</view>
									<view class="form-item">
										<text class="f36">中奖人手机</text>
										<input
											class="f36"
											type="number"
											v-model="val.phone"
											:maxlength="11"
											placeholder="请输入中奖人手机号" />
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="form-item">
					<text class="f36">设置优惠券状态</text>
					<switch
						checked
						@change="switch2Change"
						:checked="form.isQuan"
						:disabled="liveInfo.tySet == '1' || liveInfo.isActivity == '0'" />
				</view>
				<view
					class="tips f28 mt20 mb20 text-gray"
					v-if="liveInfo.tySet == '1' || liveInfo.isActivity == '0'"
					>提示:直播间优惠券未开启或者由管理员统一设置!</view
				>
				<view v-if="form.isQuan">
					<view class="form-item">
						<!-- 优惠券名称 -->
						<text class="f36">优惠券名称</text>
						<input
							class="f36"
							type="text"
							v-model="form.couponName"
							:maxlength="15"
							placeholder="请输入优惠券名称" />
					</view>
					<view class="form-item">
						<text class="f36">优惠券数量</text>
						<input class="f36" type="number" v-model="form.stock" placeholder="请输入优惠券数量" />
					</view>
				</view>
			</view>
			<view class="form-submit" :class="'bg-' + theme.backgroundColor" @tap="submitSetting">
				提交
			</view>
		</view>
	</view>
</template>

<script>
const app = getApp();
import api from "utils/api";
const util = require("utils/util.js");

export default {
	data() {
		return {
			liveId: "",
			theme: app.globalData.theme,
			jiangpinList: [],
			form: {
				isChou: false,
				isQuan: false,
				hbAmount: "",
				hbQty: "",
				jfAmount: "",
				jfQty: "",
				couponName: "",
				stock: "",
			},
			checkBox: [
				{
					label: "红包",
					value: "2",
					checked: false,
				},
				{
					label: "积分",
					value: "1",
					checked: false,
				},
			],
			liveInfo: {},
			isEdit: "",
			
		};
	},
	onLoad(options) {
		this.liveId = options.liveId;
		this.isEdit = options.isEdit;
		if (this.isEdit) {
			this.getSetting();
		}
		this.getLiveinfo();
	},

	methods: {
		//获取设置信息
		getSetting() {
			let userInfo = uni.getStorageSync("user_info");
			api
				.getLiveSetting({
					tzUserId: userInfo.id, //团长id
					liveId: this.liveId, //直播间id
				})
				.then((res) => {
					let data = res.data;
					if (data.liveCouponInfo && data.liveCouponInfo.couponName) {
						this.form.isQuan = true;
						this.form.couponName = data.liveCouponInfo ? data.liveCouponInfo.couponName : "";
						this.form.stock = data.liveCouponInfo ? data.liveCouponInfo.stock : "";
					}
					if (data.liveUserSetRewardList && data.liveUserSetRewardList.length) {
						data.liveUserSetRewardList.forEach((item) => {
							if (item.rewardType == 1) {
								this.checkBox[1].checked = true;
								this.form.jfAmount = item.rewardNum;
								this.form.jfQty = item.getUserNo;
							}
							if (item.rewardType == 2) {
								this.checkBox[0].checked = true;
								this.form.hbAmount = item.rewardNum;
								this.form.hbQty = item.getUserNo;
							}
						});
					}
					if (data.liveLotterySetList && data.liveLotterySetList.length) {
						this.form.isChou = true;
						let arr = [];
						data.liveLotterySetList.forEach((item) => {
							arr.push({
								name: item.name,
								num: item.qty,
								people: item.lotterySetUserList,
							});
						});
						this.jiangpinList = arr;
					}
				});
		},
		submitSetting() {
			let userInfo = uni.getStorageSync("user_info");
			let para = {
				tzUserId: userInfo.id, //团长id
				liveId: this.liveId, //直播间id
				liveUserSetRewardList: [
					// {
					// 	rewardType: null, // 奖励类型（1积分，2红包）
					// 	rewardNum: null, // 总奖励数量
					// 	getUserNo: null, // 领取人数
					// },
				],
				liveLotterySetList: [
					// {
					// 	name: null, //奖品名称
					// 	qty: null, //奖品数量
					// 	lotterySetUserList: [
					// 		{
					// 			//内定人
					// 			phone: null, //手机号
					// 		},
					// 	],
					// },
				],
				liveCouponInfo: {
					couponName: this.form.couponName, //优惠券名称
					stock: this.form.stock, //库存
				},
			};

			this.checkBox.forEach((el) => {
				if (el.checked) {
					if (el.value == 1) {
						if (!this.form.jfAmount) {
							uni.showToast({
								title: "请输入积分数量",
								icon: "none",
								mask: true,
							});
							return;
						}
						if (!this.form.jfQty) {
							uni.showToast({
								title: "请输入积分人数",
								icon: "none",
								mask: true,
							});
							return;
						}
					}
					if (el.value == 2) {
						if (!this.form.hbAmount) {
							uni.showToast({
								title: "请输入红包金额",
								icon: "none",
								mask: true,
							});
							return;
						}
						if (!this.form.hbQty) {
							uni.showToast({
								title: "请输入红包数量",
								icon: "none",
								mask: true,
							});
							return;
						}
						if(this.form.hbAmount<0.3){
							uni.showToast({
								title:'单个红包金额不能低于0.3元'
							})
						}
					}
					let obj = {
						rewardType: el.value,
						rewardNum: el.value == 1 ? this.form.jfAmount : this.form.hbAmount,
						getUserNo: el.value == 1 ? this.form.jfQty : this.form.hbQty,
					};
					para.liveUserSetRewardList.push(obj);
				}
			});
			if (this.form.isChou) {
				if (this.jiangpinList && this.jiangpinList.length) {
					if (this.jiangpinList.some((el) => el.name.length > 12)) {
						uni.showToast({
							title: "奖品名称不能超过12个字",
							icon: "none",
							mask: true,
						});
						return;
					}
					this.jiangpinList.forEach((el) => {
						let peopleIndex = el.people.findIndex((e) => !e.phone);
						if (peopleIndex != -1) {
							el.people.splice(peopleIndex, 1);
						}
						let obj = {
							name: el.name,
							qty: el.num,
							lotterySetUserList: el.people,
						};
						para.liveLotterySetList.push(obj);
					});
				} else {
					uni.showToast({
						title: "请添加奖品",
						icon: "none",
						mask: true,
					});
					return;
				}
			}
			para.liveCouponInfo = util.filterForm(para.liveCouponInfo);
			para = util.filterForm(para);
			uni.showModal({
				title: "提示",
				content: "确定保存设置吗?",
				showCancel: true,
				success: ({ confirm, cancel }) => {
					if (confirm) {
						api.liveusersetrewardsaveAll(para).then((res) => {
							console.log(res);
							uni.showToast({
								title: "操作成功",
								icon: "success",
								mask: true,
							});
							setTimeout(() => {
								uni.navigateBack({
									delta: 1,
								});
							}, 1000);
						});
					}
				},
			});
		},
		//直播间信息
		getLiveinfo() {
			api.getliveInfo(this.liveId).then((res) => {
				this.liveInfo = res.data;
			});
		},
	
		changeCheckBox(e) {
			let arr = e.detail.value;
			let checkBox = this.checkBox;
			checkBox.forEach((item) => {
				if (arr.includes(item.value)) {
					item.checked = true;
				} else {
					item.checked = false;
				}
			});
			this.checkBox = checkBox;
		},
		switch1Change(e) {
			this.form.isChou = e.detail.value;
			if (this.form.isChou) {
				let obj = {
					name: "",
					num: "",
					people: [
						{
							phone: "",
						},
					],
				};
				if (this.jiangpinList.length == 0) {
					this.jiangpinList.push(obj);
				}
			} else {
				//过滤没输入奖品名称的数据
				this.jiangpinList = this.jiangpinList.filter((item) => {
					return item.name != "";
				});
			}
		},
		//优惠券
		switch2Change(e) {
			this.form.isQuan = e.detail.value;
		},
		addJiangpin(item, index) {
			let obj = {
				name: "",
				num: "",
				people: [
					{
						phone: "",
					},
				],
			};
			this.jiangpinList.push(obj);
		},
		addzhongjiangren(item, val, index) {
			if (item.people.length >= item.num) {
				uni.showToast({
					title: "内定人数量不能超过奖品数量",
					icon: "none",
					mask: true,
				});
				return;
			}
			item.people.push({
				phone: "",
			});
		},
	},
};
</script>

<style lang="scss">
.form-list {
	padding: 20rpx;
	margin: 20rpx 0rpx;
	padding-bottom: 160rpx;
}

.form-item {
	background-color: #fff;
	border-radius: 10rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.jiangpinList {
	padding: 20rpx;
}

.jiangpin {
	background-color: #fff;
	padding: 20rpx;
	border-radius: 10rpx;

	.title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
	}
}

.zhongjianren {
	.title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
	}
}

.line-b {
	border-bottom: 6rpx solid #eee;
}

.form-submit {
	width: 100%;
	height: 100rpx;
	border-radius: 10rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 20rpx;
	color: #fff;
	font-size: 36rpx;
	font-weight: bold;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 9;
}
</style>
